Estos días estoy intentando aprender qué es Backbone.js. Hace poco he estado trabajando en un tema que me ha hecho ver porqué es necesario utilizar bibliotecas como jQuery para según qué cosas, en vez de hacerlas a pelo. Y como una cosa lleva a la otra, me puse a googlear a ver qué encontraba para facilitarme el trabajo.
Aunque en mi caso no se puede definir de 'aplicación web' lo que estaba montando, sí que es verdad es que, a la que la cosa se lía un poco, acabas teniendo un montón de problemas por mantener sincronizados la parte visual y los datos que contienen los diferentes elementos de la web.
Como indican en la introducción a Backbone.js:
El primer paso fue buscar un tutorial para saber cómo funciona esto del Backbone.js. Encontré este libro de Addy Osmani: "Developing Backbone Applications" (o en formato PDF en OpenLibra) que parecía justo lo que buscaba.
Sin embargo, yo necesitaba algo más básico, una guía paso a paso para montar una aplicación simple y ver qué tal.
La recomendación de aprender mirando el código de la aplicación de ejemplo: LocalToDos, por muy bien comentado que esté el código, tampoco me servía: yo quería saber los porqués: porqué se hace esto, porqué se hace aquello... En el código comentado solo se indica para qué sirve cada parte...
Así que de nuevo en las manos de Google, caí en un tutorial de NetTuts+: Build a contact manager using Backbone.js.
Atención a lo que pone en la entradilla el tutorial:
Así que copio el CSS (y la imagen) a sus carpetas correspondientes y avanzo hasta la segunda parte del tutorial.
Pero en la segunda parte las cosas se complican y empiezan a surgir los problemas. Cabe decir que he cometido muchos errores como "funtion" en vez de "function" y cosas por el estilo... Pero es que, además, hay cosas que siguiendo el tutorial, no funcionan. (No soy el único que lo dice; échale un vistazo al comentario del usuario ganar en el tutorial)
Afortunadamente, en cada parte del tutorial se proporciona un zip con todo el código funcionando (más o menos, como puede verse en los comentarios con el tema de las imágenes). Así que empiezo a contrastar el código y te das cuenta que hay cambios importantes entre lo que dice el tutorial y lo que aparece en el código de la demo.
Para ilustrar hasta qué punto difieren el tutorial en la web y el código de la segunda parte en la captura tienes, a la izquierda, el código de la web y a la derecha, el contenido en app.js (abierto en Notepad++) del método createSelect():
No me preocupan demasiado los dos toLowerCase() en _.each(...), ya que lo único que hacen es convertir a minúsculas... Pero la primera diferencia me parece especialmente preocupante, sobretodo cuando decides comentar la línea que comienza por 'var filter' y ves que todo funciona igual. Entonces te preguntas cómo puede ser que funcione si la línea que empieza con select (a la izquierda) forma parte de la declaración de la variable filter... O si sigues mirando el código y descubres que la variable filter no se utiliza en ningún sitio... ¿? Supongo que la parte de this.el.find sólo busca el elemento con id="filter" y ahí inserta el select, por lo que da igual buscarlo que indicarlo a mano (como hace en el código). Pero de nuevo, se supone que es un tutorial para novatos. El problema realmente grave es cuando el código no funciona, ya que entonces no sabes si el problema es que el tutorial de la web contenía errores que fueron corregidos en el código descargable o al revés...
El principal objetivo de un tutorial debería ser enseñar cómo hacer algo, paso a paso, explicando los puntos oscuros para que el alumno vea la luz incluso en las zonas más pantanosas...
Afortunadamente, en internet hay una fuente casi infinita de tutoriales y guías, así que si, como yo, encuentras un mal tutorial, lo único que hay que hacer es buscar otro y seguir aprendiendo.
Me gustaría aportar algo más que una simple queja para solucionar este problema. Había pensado en arreglar la aplicación y explicar qué pasos he seguido para ello, pero mis conocimientos de Backbone.js están demasiado verdes...
Aunque en mi caso no se puede definir de 'aplicación web' lo que estaba montando, sí que es verdad es que, a la que la cosa se lía un poco, acabas teniendo un montón de problemas por mantener sincronizados la parte visual y los datos que contienen los diferentes elementos de la web.
Como indican en la introducción a Backbone.js:
It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server.
(Es demasiado fácil crear aplicaciones que acaban siendo pilas de jQuery, selectores y callbacks, que intentan mantener los datos sincronizados entre la parte visual en HTML, la lógica en Javascript y la base de datos en tu servidor).Así que Backbone.js parecía algo que me podría interesar de cara al futuro.
El primer paso fue buscar un tutorial para saber cómo funciona esto del Backbone.js. Encontré este libro de Addy Osmani: "Developing Backbone Applications" (o en formato PDF en OpenLibra) que parecía justo lo que buscaba.
Sin embargo, yo necesitaba algo más básico, una guía paso a paso para montar una aplicación simple y ver qué tal.
La recomendación de aprender mirando el código de la aplicación de ejemplo: LocalToDos, por muy bien comentado que esté el código, tampoco me servía: yo quería saber los porqués: porqué se hace esto, porqué se hace aquello... En el código comentado solo se indica para qué sirve cada parte...
Así que de nuevo en las manos de Google, caí en un tutorial de NetTuts+: Build a contact manager using Backbone.js.
Atención a lo que pone en la entradilla el tutorial:
This is perfect for someone who has just finished learning the basics of JavaScript and jQuery and is looking to take their front end chops to the next level!
(Esto es perfecto para alguien que acaba de aprender lo básico de Javascript y jQuery y está buscando llevar sus habilidades como desarrollador front end al siguiente nivel!)Pues bien; me bajo los archivos de ejemplo y empiezo a seguir las indicaciones de cada uno de las partes del tutorial. La primera parte es sencilla. En cuanto acabas de construir la aplicación, la lanzas en el navegador y el aspecto es... decepcionante. Sin embargo, como bien se indica justo tras la imagen final que ilustra esta parte del tutorial, se trata de Backbone.js y no de CSS, por lo que si no has insertado el fichero CSS de la demo en tu propia versión del tutorial, el aspecto no es el de las fotos...
Así que copio el CSS (y la imagen) a sus carpetas correspondientes y avanzo hasta la segunda parte del tutorial.
Pero en la segunda parte las cosas se complican y empiezan a surgir los problemas. Cabe decir que he cometido muchos errores como "funtion" en vez de "function" y cosas por el estilo... Pero es que, además, hay cosas que siguiendo el tutorial, no funcionan. (No soy el único que lo dice; échale un vistazo al comentario del usuario ganar en el tutorial)
Afortunadamente, en cada parte del tutorial se proporciona un zip con todo el código funcionando (más o menos, como puede verse en los comentarios con el tema de las imágenes). Así que empiezo a contrastar el código y te das cuenta que hay cambios importantes entre lo que dice el tutorial y lo que aparece en el código de la demo.
Para ilustrar hasta qué punto difieren el tutorial en la web y el código de la segunda parte en la captura tienes, a la izquierda, el código de la web y a la derecha, el contenido en app.js (abierto en Notepad++) del método createSelect():
No me preocupan demasiado los dos toLowerCase() en _.each(...), ya que lo único que hacen es convertir a minúsculas... Pero la primera diferencia me parece especialmente preocupante, sobretodo cuando decides comentar la línea que comienza por 'var filter' y ves que todo funciona igual. Entonces te preguntas cómo puede ser que funcione si la línea que empieza con select (a la izquierda) forma parte de la declaración de la variable filter... O si sigues mirando el código y descubres que la variable filter no se utiliza en ningún sitio... ¿? Supongo que la parte de this.el.find sólo busca el elemento con id="filter" y ahí inserta el select, por lo que da igual buscarlo que indicarlo a mano (como hace en el código). Pero de nuevo, se supone que es un tutorial para novatos. El problema realmente grave es cuando el código no funciona, ya que entonces no sabes si el problema es que el tutorial de la web contenía errores que fueron corregidos en el código descargable o al revés...
El principal objetivo de un tutorial debería ser enseñar cómo hacer algo, paso a paso, explicando los puntos oscuros para que el alumno vea la luz incluso en las zonas más pantanosas...
Afortunadamente, en internet hay una fuente casi infinita de tutoriales y guías, así que si, como yo, encuentras un mal tutorial, lo único que hay que hacer es buscar otro y seguir aprendiendo.
Me gustaría aportar algo más que una simple queja para solucionar este problema. Había pensado en arreglar la aplicación y explicar qué pasos he seguido para ello, pero mis conocimientos de Backbone.js están demasiado verdes...
Comentarios